<template>
  <div class="kh-classify-main">
    <div class="kh-classify-line"></div>
    <div class="kh-classify-nav">
      <router-link :to="baseUrl+item.path" v-for="(item,index) in classify" :key="index">{{item.title}}</router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: "classify",
    data() {
      return {
        baseUrl: '/article/',
        classify: [
          {
            title: 'Web',
            path: 'web'
          },
          {
            title: 'Java',
            path: 'java'
          },
          {
            title: 'Html',
            path: 'html'
          },
          {
            title: 'CSS',
            path: 'css'
          },
          {
            title: 'UI',
            path: 'ui'
          },
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  .kh-classify-cs {
    min-width: 1200px;
    width: 80%;
    margin: 50px auto 20px;
    padding: 30px;
    background: #fff;
    box-sizing: border-box;
  }

  .kh-classify-main {
    position: relative;

  .kh-classify-line {
    opacity: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    border-radius: 2px;
    background-color: #999;
    transition: all 0.3s;
  }
  }

  .kh-classify-main {
    display: inline-block;

  a {
    color: #999;
    font-size: 16px;
    margin-right: 20px;
  }
  }
</style>
